import React from 'react';
import 'styles/components/skeleton.scss'
import Condition from 'components/condition'
const { If } = Condition;

/**
 * 骨架屏组件（假）
 * 为什么说是假骨架屏，真骨架屏应该是遍历子组件然后给:empty增加样式
 * 这样到时候有了内容页面就不会触发重排，能够提升一定的渲染效率，而且能够根据内容渲染骨架屏
 * 因为本系统内主要应用的地方布局略显复杂，而且一般内部元素很少写block属性，所以很难实现
 * 所以这是个假的骨架屏
 * antd也是假的，所以我也写假的 :)
 * @param props
 * @return {*}
 * @constructor
 */
function Skeleton (props) {
  const { avatar, loading, children, title, paragraph, titleWidth, paragraphWidth } = props;
  let pWidth = [].concat(paragraphWidth);
  if(pWidth.length < paragraph) {
    let count = 1;
    while(count <= paragraph) {
      if(count === paragraph) {
        pWidth.push('78%');
      } else {
        pWidth.push('100%');
      }
      count++;
    }
  }
  let skeletonDom = (
    <div className="skeleton">
      <If value={avatar}>
        <div className="skeleton-avatar">
          <span/>
        </div>
      </If>
      <div className="skeleton-content">
        <If value={title}>
          <h3 style={{ width: titleWidth }}/>
        </If>
        <If value={paragraph}>
          <ul>
            {Array.from({ length: paragraph })
              .map((item, index) => <li key={index} style={{ width: pWidth[index] }}/>)}
          </ul>
        </If>
      </div>
    </div>
  );
  return children ? (
    loading ? skeletonDom : <div>{children}</div>
  ) : skeletonDom;
}

Skeleton.PropTypes = {
  avatar: React.PropTypes.bool,  //是否有头像
  title: React.PropTypes.bool,  //是否需要标题
  loading: React.PropTypes.bool,  //有子组件时判断显示骨架屏还是子组件
  paragraph: React.PropTypes.number,  //内容行数
  titleWidth: React.PropTypes.any,  //标题宽度
  paragraphWidth: React.PropTypes.array  //内容每一行的宽度
};

Skeleton.defaultProps = {
  title: true,
  titleWidth: '50%',
  paragraph: 3,
  paragraphWidth: []
};

export default Skeleton;
